<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
import { useParkIndex,  useAllAreaList, useParkDelete, useGetDictData } from '@fl/api/xf-api'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'industry-evaluation-index',
})

const { push } = useRouter()
const tableRef = ref()
const areaOptions = ref<any>([])
const dictOptions = ref<any>([])

// 搜索条件、分页参数
const initialState = {
    areaId: '',
    typeId: '',
    parkName: ''
}
const state = ref<FieldValues>(cloneDeep(initialState))
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

const { data: areaList } = useAllAreaList()
const { data: dictList } = useGetDictData({ dictType: 'park_layout_classification' })
// 查询列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    ...state.value,
}))
const { data, isLoading } = useParkIndex(params)
const records = ref<any>()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
    if(areaList.value) {
        areaOptions.value = cloneDeep(areaList.value).reduce((pre: any, cur: any) => {
            cur.label = cur.areaName
            cur.value = cur.areaDistrictId
            pre.push(cur)
            return pre
        }, [])
        // console.log('areaOptions.value', areaOptions.value)
    }
    if (dictList.value) {
        dictOptions.value = cloneDeep(dictList.value.park_layout_classification)
        // console.log('dictOptions.value', dictOptions.value)
    }
})

// 删除
const { mutate: deleteMutate } = useParkDelete()

// 搜索
function submit(values: FieldValues) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}

// 重置
function reset() {
    state.value = initialState
    tablePage.value = initialPage
}

// 新增
function goToAdd() {
    push(`/house-source-center/evaluation-management/industry-evaluation/add`)
}

// 列表：查看
function goToShow(row: any) {
    push(`/house-source-center/evaluation-management/industry-evaluation/company/index?name=${row.parkName}&parkId=${row.id}&areaId=${row.areaId}`)
}

// 列表：编辑
function goToEdit(row: any) {
    push(`/house-source-center/evaluation-management/industry-evaluation/${row.id}/edit`)
}

// 列表：删除
function deleteConfirm(row: any) {
    console.log('删除', row.id)
    deleteMutate([row.id], {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const columns: PlusColumn[] = [
    {
        fieldProps: {
            filterable: true,
        },
        label: '所属区域',
        prop: 'areaId',
        valueType: 'select',
        options: computed(() => {
            return areaOptions.value
        })
    },
    {
        fieldProps: {
            filterable: true,
        },
        label: '空间产业类型',
        prop: 'typeId',
        valueType: 'select',
        options: computed(() => {
            return dictOptions.value
        })
    },
    {
        label: '重点园区',
        prop: 'parkName',
        valueType: 'copy',
    },
]
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'areaName', title: '区域' },
        { field: 'typeName', title: '空间布局类型' },
        { field: 'parkName', slots: { default: 'parkName' },title: '重点园区' },
        { field: 'parkInfo', title: '产业定位' },
        { slots: { default: 'operate' }, title: '操作', width: 200 },
    ],
})
</script>

<template>
    <ElCard class="mb-20" shadow="never">
        <SearchForm v-bind="state" :columns="columns" submit-text="搜索" @reset="reset" @submit="submit" />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading" :data="records"
            @page-change="handlePageChange">
            <template #areaName="{ row }">
                {{ row.areaName }}
            </template>

            <template #toolbar_buttons>
                <ElButton type="primary" @click="goToAdd">
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template>

            <template #parkName="{ row }">
                <el-button style="color:#409eff" text @click="goToShow(row)">
                    {{ row.parkName }}
                </el-button>
            </template>

            <template #operate="{ row }">
                <el-button type="primary" text @click="goToEdit(row)">
                    编辑
                </el-button>

                <el-popconfirm title="确认删除吗？" @confirm="deleteConfirm(row)">
                    <template #reference>
                        <el-button text type="warning">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>

            </template>
        </SearchTable>
    </ElCard>
</template>
